<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>首页</title>
    <base href="<%=basePath%>">
    <link rel="icon" href="<%=basePath%>plug_in/images/icon/top.jpg" type="image/x-icon"/>
    <script src="<%=basePath%>plug_in/js/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>plug_in/layui254/css/layui.css">
    <script type="text/javascript" src="<%=basePath%>plug_in/layui254/layui.js"></script>

    <style type="text/css">
      #maindiv{
          margin-left: 20px;
          height: 700px;
          border: 1px solid #D4D4D4;
        }

      /*
    #DAF5FF;  #F2FAFF;  */

      /**文件div的样式*/
        .image_div {
            float: left;
            margin: 5px;
            width: 120px;
        }
      [class="image_div"]:hover {
            background-color: #F2FAFF;
            cursor: pointer;
        }
        /**文件夹图标的样式*/
        .image_zzy {
            margin-left:23px;
            margin-top:10px;
            margin-bottom:5px;
        }
      /**文件夹图标的文字样式*/
      .image_word{
          text-align:center;
          height: 25px;
          line-height: 25px;
          width: 115px;
      }

      .optdiv{
          width: 103px;
          height: 111px;
          display: none;
          position: absolute;
          border: 1px solid #B6B6B6;
          background-color: white;
      }
      .optdiv i{
          margin-left: 3px;
      }
      .optdiv li{
          height: 35px;
          line-height: 35px;
          border: 1px solid #DDDDDD;
      }
      .optdiv span{
          margin-left: 5px;
      }
      [class="optdiv"] li:hover {
          background-color:  #EEF0F6;
          cursor: pointer;
      }


        .changeColor{
            background-color:#DAF5FF;
        }
    </style>


</head>
<body onclick="clickBody()" >

<%--目前父级 文件夹的的id--%>
<input id="pid" type="hidden" value="${p.id}" />
<%--目前父级 文件夹的的code--%>
<input id="pcode" type="hidden" value="${p.code}" />




<div style="display: none;" >
<form action="" method="" enctype="multipart/form-data">
    <input  id="files" type="file" value="上传" />
</form>
</div>

<div id="optdiv" class="optdiv" >


    <ul>
        <li onclick="addDir()"><i class="layui-icon" >&#xe654;</i><span>新建文件夹</span></li>
        <li onclick="uploadFiles()"><i class="layui-icon" >&#xe681;</i><span>上传</span></li>
        <li onclick="shuaxin()"><i class="layui-icon" >&#xe669;</i><span>刷新</span></li>
        <%--<li><i class="layui-icon" >&#xe601;</i><span>下载</span></li>--%>
    </ul>
</div>


<%--引入顶部页面--%>
<%@ include file="head.jsp" %>

<div id="maindiv" >
    <c:forEach step="1"  var="o" items="${list}">
    <div onclick="chageBackColor(this)" name="image_div" class="image_div">
        <img  ondblclick="openNextDir('${o.id}')" class="image_zzy" src="plug_in/images/file.png" alt="${o.name}" title="${o.name}"/>
        <div id="${o.id}" ondblclick="changeFileDir('${o.id}')" <c:if test="${o.parent!=null}">parentid="${o.parent.id}"</c:if> class="image_word"  >${o.name}</div>
        <input id="${o.id}_input" onblur="dochangeFileDir('${o.id}')"  style="display: none;" class="image_word"  value="${o.name}" />
    </div>
    </c:forEach>


    <div  class="image_div" onclick="uploadFilesThisDir()" >
        <div class="image_zzy" style="height: 67px;width: 78px;border: 1px dashed black;"  >
            <i class="layui-icon"  style="font-size:28px;position: absolute;margin-top: 20px;margin-left: 25px;" >&#xe654;</i>
        </div>
        <div  class="image_word"  >上传文件</div>
    </div>



 </div>





        <%--引入 底部页面--%>
        <%@ include file="foot.jsp" %>


</body>
<script>



    var layer;
    layui.use(['laypage', 'layer', 'table', 'form', 'laydate'], function () {
        var laypage = layui.laypage, thisLayer = layui.layer, form = layui.form, table = layui.table;
        layer = thisLayer;
    });

    $(function () {
        var msg = "${msg}";
        if (msg) {
            $("#msg").text(msg);
        }
    });


    function chageBackColor(dom) {
        var objDiv = $("#optdiv").hide();
        $(dom).addClass("changeColor").siblings().removeClass("changeColor");
        var evt = window.event || arguments[0];
        clearEventBubble(evt);
      }


    /**修改文件夹名字*/
    function changeFileDir(id) {
        $("#"+id).hide();
        $("#"+id+"_input").show();
        $("#"+id+"_input").focus();
    }

    function dochangeFileDir(id) {
        var name01 = $("#"+id).text();
        var name = $("#"+id+"_input").val();
        if(!name){
            name = $("#"+id).text();
        }
        var pid = $("#"+id).attr("parentid");
        if(!pid){
            pid = null;
        }

        if(name01==name){//没有修改
            window.location.reload();
            return false;
        }

        $.ajax({
            url: "<%=basePath%>api/cata/update",
            type: "POST",
            data: {"id":id,"name":name,"parent.id":pid},
            dataType: "json",
            success: function (data) {
                if (data.code == 200) {
                    //layer.msg('成功！', {icon: 1});

                    if(data.model==1){
                        setTimeout(function () {
                            window.location.reload();
                        },500);
                    }else {
                        layer.msg('文件名已存在！', {icon: 5});
                    }

                } else {
                    layer.msg('失败！', {icon: 5});
                }
            },
            error: function (data) {
                layer.msg('系统异常！', {icon: 5});
            }
        });



    }

    /**打开下级文件夹和文件列表*/
    function openNextDir(id) {
        alert("打开下级文件夹和者文件列表" + id);
    }


    function clearEventBubble(evt) {
        if (evt.stopPropagation)
            evt.stopPropagation();
        else
            evt.cancelBubble = true;
        if (evt.preventDefault)
            evt.preventDefault();
        else
            evt.returnValue = false;
    }



    document.getElementById("maindiv").oncontextmenu = function (event) {//阻止 鼠标 邮件弹出 默认框
        event.preventDefault();
        showDiv();
    };

    document.getElementById("optdiv").oncontextmenu = function (event) {//阻止 鼠标 邮件弹出 默认框
        event.preventDefault();
    };




    function showDiv() {//提示框位置跟随鼠标移动
        var objDiv = $("#optdiv");
        $(objDiv).css("display","block");
        var evt = window.event || arguments[0];
        var top  = evt.pageY+5;
        var left = evt.pageX+5;
        $(objDiv).css({ 'top' : top + 'px', 'left': left+ 'px'  });
    }


function clickBody() {
    var objDiv = $("#optdiv").hide();
    $("[name='image_div']").removeClass("changeColor");
}


function shuaxin() {
    window.location.reload();
}


    function addDir(){
        var appendHtml = '<div  onclick="chageBackColor(this)" name="image_div" class="image_div"> ' +
        '            <img  class="image_zzy" src="plug_in/images/file.png"   title="新建文件夹"/> ' +
        '            <div  class="image_word"  ><input onblur="blurAddDir(this)" id="addDir" style="width: 75px;" type="text" value="新建文件夹" /></div> ' +
        '            </div>';
        $("#maindiv").prepend(appendHtml);
        $("#addDir").focus();
    }


    function blurAddDir(dom) {
       var dirName = $(dom).val();
        doAddDir(dirName);
    }


    function doAddDir(name) {

        if(!name || name.length==0){
            name = "新建文件夹";
        }

        var pid = $("#pid").val();
        var pcode = $("#pcode").val();
        $.ajax({
            url: "<%=basePath%>api/cata/save",
            type: "POST",
            data: {"name":name,"pid":pid,"pcode":pcode},
            dataType: "json",
            success: function (data) {
                if (data.code == 200) {
                    //layer.msg('成功！', {icon: 1});
                    setTimeout(function () {
                        window.location.reload();
                    },500);
                } else {
                    layer.msg('失败！', {icon: 5});
                }
            },
            error: function (data) {
                layer.msg('系统异常！', {icon: 5});
            }
        });
    }
















    function uploadFiles(){
        $("#files").click();
    }


    function uploadFilesThisDir(){
        $("#files").click();
    }














   /* $(function () {
        $("body").on("click",function () {
            alert("aaaaaaaaa")
            var evt = window.event || arguments[0];
            if(evt.button == 2){//只让 鼠标左键 起作用 0 左 1 中 2 右
                alert("点击了鼠标右键")
            }


        });
    })
*/

</script>
</html>
